/* eslint-disable react-hooks/rules-of-hooks */
import React, { useEffect, useState } from "react";

import { Table, Modal, Input, Button, Form, Select, message } from "antd";

import type { ColumnsType } from "antd/es/table";
// 引入接口
import * as service from "../../../../api/HuYueYue/jixiao.js";
import "../../../../styles/HuYueYue/muban.scss";

import { useNavigate } from "react-router-dom";
function muban(props: any) {

    // -------------------------
    let [text, setText] = useState({})

    const [isOpen, setisOpen] = useState(false);
    // -------------------------

    const [dakai, setdakai] = useState(false);

    interface DataType {
        key: string;
        name: string;
        type: string;
        time: string;
        away: string;
        auther: string;

    }

    const columns: ColumnsType<DataType> = [
        {
            title: "模板名称",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "考核周期",
            dataIndex: "time",
            key: "time",
        },
        {
            title: "考核类型",
            key: "type",
            dataIndex: "type",
        },
        {
            title: "核算方式",
            key: "away",
            dataIndex: "away",
        },
        {
            title: "备注",
            key: "auther",
            dataIndex: "auther",
        },
        {
            title: "操作",
            key: "caozuo",
            dataIndex: "caozuo",
            render: (_, record: { key: React.Key }) =>
                list.length >= 1 ? (
                    <div className="operation">
                        <div
                            onClick={() => {
                                goModel(record);
                            }}
                        >编辑</div>
                        <div
                            onClick={() => {
                                del(record);
                            }}
                        >删除</div>
                    </div>
                ) : null,
        },
    ];
    let [id, useId] = useState("");
    //   删除
    let del = (record: any) => {
        console.log(record, "删除");
        setIsModalOpen(true);
        useId(record.id);
    };
    //   跳转
    let navigate = useNavigate();
    
    var goModel = (key: any) => {
        setisOpen(true);
        console.log(key);
        form.setFieldsValue(key);
        // form.setFieldValue(key)
        setText(key)
    }


    // 新增
    let add = () => {
        setdakai(true)
    };
    // 列表请求
    let muban_list = () => {
        service.jixiao_xiaoshou().then((ok) => {
            console.log(ok);
            let arr = ok.data.map((v: any, i: any) => {
                return {
                    key: i,
                    id: v.id,
                    name: v.name,
                    time:v.time,
                    type:v.type,
                    away:v.away,
                    auther:v.auther,
                };
            });
            useList(arr);
        });
    };


    // 列表数据
    let [list, useList] = useState([]);
    useEffect(() => {
        muban_list();
    }, []);
    console.log(list);
    //删除的提示框
    const [isModalOpen, setIsModalOpen] = useState(false);

    const handleOk = () => {
        setIsModalOpen(false);
        console.log(id);
        service.jixiao_xiaoshou_delete({ id }).then((ok) => {
            console.log(ok);
            muban_list();
        });
    };


    // 新增的弹出框
    const handleCancel = () => {
        setdakai(false);
    };
    const showModal = () => {
        setdakai(true);
    };
    const onFinish = (e: any) => {
        //  setIsModalOpen(false);
        console.log(e);

        // 调新增计划的接口
        service.jixiao_xiaoshou_add(e).then((res: any) => {
            console.log(res);
            setdakai(false);
            if (res.data.state == 200) {
                message.info("添加成功！");
            }
        })
        window.location.reload() // 强制页面刷新
    };

    const quxiao = () => {
        setdakai(false);
    };



    var goModel = (key: any) => {
        setisOpen(true);
        console.log(key);
        useZbid(key.id)
        form.setFieldsValue(key);
        // form.setFieldValue(key)
        setText(key)
    }
let [zbid,useZbid] = useState("")
    // 修改的
    // -------------------------------
    const wancheng = (e: any) => {
        setisOpen(false);
        console.log("点击完成后得到的数据",e);
        console.log("点击完成后得到",e.id);
        // 修改的接口
        service.jixiao_xiaoshou_update({
            id:zbid,
            name:e.name,
            type:e.type,
            rule:e.rule,
            limit:e.limit,
            auther:e.auther,
        }).then((res)=>{
            console.log("修改的信息",res);
            muban_list();
        })
    };

    const Cancel = () => {
        setisOpen(false);
    };
    // -------------------------------------


    // 修改的弹出框
    // 在Form中绑定的form 是自己定义的，而Form 引入的从antdesgin 中的
    const [form] = Form.useForm()

    return (
        <div className="muban-box">
            <div className="center">
                <h2>
                    考核模板
                    <button
                        className="add"
                        onClick={() => {
                            add();
                        }}
                    >
                        新增模板
                    </button>
                </h2>

                {/* 删除的弹出框 */}
                <Modal
                    title="取消确认"
                    open={isModalOpen}
                    onOk={handleOk}
                    onCancel={handleCancel}
                    okText="确定"
                    cancelText="取消"
                >
                    信息删除后无法恢复，确定要删除此考核计划吗？
                </Modal>


                {/* 新增弹出框 */}
                <Modal title="新增" open={dakai} onCancel={quxiao} footer={null}>
                    <Form
                        name="basic"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 16 }}
                        initialValues={{ remember: true }}
                        autoComplete="off"
                        onFinish={onFinish}
                    >
                        <Form.Item
                            label="模板名称"
                            name="name"
                            rules={[{ required: true, message: '请输入考核模板名称！' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="考核周期"
                            name="time"
                            rules={[{ required: true, message: '请输入正确的考核周期！' }]}
                        >
                            <Select>
                                <Select.Option value="季度">季度</Select.Option>
                                <Select.Option value="年度">年度</Select.Option>
                                <Select.Option value="半年度">半年度</Select.Option>
                                <Select.Option value="月度">月度</Select.Option>
                            </Select>
                        </Form.Item>

                        <Form.Item
                            label="考核类型"
                            name="type"
                            rules={[{ required: true, message: '请输入考核考核类型！' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="核算方式"
                            name="away"
                            rules={[{ required: true, message: '请输入考核核算方式！' }]}
                        >
                            <Input />
                        </Form.Item>


                        <Form.Item
                            label="备注"
                            name="auther"
                            rules={[{ required: true, message: '请输入备注！' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>



                {/* 修改的弹出框 */}
                <Modal title="修改" open={isOpen} onCancel={Cancel} footer={null}>
                <Form
                    form={form}
                    name="basic"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={text}
                    autoComplete="off"
                    onFinish={wancheng}
                >
                    <Form.Item
                        label="模板名称"
                        name="name"
                        rules={[{ required: true, message: '请输入模板名称！'}]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="考核周期"
                        name="time"
                        rules={[{ required: true, message: '请输入考核周期！'}]}
                    >
                        <Select>
                                <Select.Option value="季度">季度</Select.Option>
                                <Select.Option value="年度">年度</Select.Option>
                                <Select.Option value="半年度">半年度</Select.Option>
                                <Select.Option value="月度">月度</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="考核类型"
                        name="type"
                        rules={[{ required: true, message: '请输入正确的考核类型类型！'}]}
                    >
                        <Select>
                            <Select.Option value="加分项">加分项</Select.Option>
                            <Select.Option value="减分项">减分项</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="核算方式"
                        name="away"
                        rules={[{ required: true, message: '请输入考核核算方式！' }]}
                    >
                        <Input />
                    </Form.Item>


                    <Form.Item
                        label="备注"
                        name="auther"
                        rules={[{ required: true, message: '请输入备注！' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>


                <Table
                    columns={columns}
                    dataSource={list}
                    pagination={{ pageSize: 9 }}
                />
            </div>
        </div>
    );
}

export default muban;
